<template>
  <div>
    <el-form :inline="true">
      <el-form-item>
        <el-button type="primary" @click="dialogVisible = true">新增</el-button>
      </el-form-item>
      <el-form-item>
        <el-popconfirm title="确定批量删除吗？" @confirm="delHandle(null)">
          <el-button type="danger" slot="reference" :disabled="delBtlStatus">批量删除</el-button>
        </el-popconfirm>
      </el-form-item>
    </el-form>

    <div class="info">
      <el-divider><h1>我的地址信息</h1></el-divider>
      <br><br>
      <div v-if="this.addressData.length===0">
        <el-empty description="没有更多地址信息咯"></el-empty>
      </div>
      <div v-else>
        <el-table
            ref="multipleTable"
            :data="addressData"
            tooltip-effect="dark"
            style="width: 100%"
            border
            stripe
            @selection-change="handleSelectionChange">

          <el-table-column
              type="selection"
              width="55">
          </el-table-column>

          <el-table-column
              prop="name"
              label="收件人"
              width="120">
          </el-table-column>
          <el-table-column
              prop="phone"
              label="联系电话"
              width="150"
              show-overflow-tooltip>
          </el-table-column>
          <el-table-column
              prop="area"
              label="所在地域"
              width="150"
              show-overflow-tooltip>
          </el-table-column>
          <el-table-column
              prop="address"
              label="地址信息"
              width="250"
              show-overflow-tooltip>
          </el-table-column>

          <el-table-column
              prop="defaults"
              label="默认信息"
              width="120"
          >
            <template slot-scope="scope">
              <el-tag size="small" v-if="scope.row.defaults===true" type="success">默认地址</el-tag>
            </template>

          </el-table-column>
          <el-table-column
              prop="icon"
              label="操作">

            <template slot-scope="scope">
              <el-button type="text" @click="editHandle(scope.row.id)">编辑</el-button>
              <el-divider direction="vertical"></el-divider>

              <template>
                <el-popconfirm title="确定删除吗？" @confirm="delHandle(scope.row.id)">
                  <el-button type="text" slot="reference">删除</el-button>
                </el-popconfirm>
              </template>

            </template>
          </el-table-column>

        </el-table>
      </div>
    </div>

    <!--新增对话框-->
    <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="600px"
        :before-close="handleClose">

      <el-form :model="editForm" :rules="editFormRules" ref="editForm" label-width="100px" class="demo-editForm">

        <el-form-item label="收件人姓名" prop="name" label-width="100px">
          <el-input v-model="editForm.name" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="联系电话" prop="phone" label-width="100px">
          <el-input v-model="editForm.phone" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="所在地域" prop="area" label-width="100px">
          <el-input v-model="editForm.area" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="详细地址" prop="address" label-width="100px">
          <el-input v-model="editForm.address" autocomplete="off"></el-input>
        </el-form-item>


        <el-form-item label="默认地址" prop="defaults" label-width="100px">
          <el-switch v-model="editForm.defaults" :active-value="true" :inactive-value="false" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('editForm')">立即创建</el-button>
          <el-button @click="resetForm('editForm')">重置</el-button>
        </el-form-item>
      </el-form>

    </el-dialog>

  </div>
</template>

<script>
import { getAddressinfo, getAddressById, updateOrSaveAddress, deleteAddressByIds } from "@/api/pc";
export default {
  name: "Addressinfo",
  data() {
    return {
      addressData: [],
      dialogVisible: false,
      multipleSelection: [],
      delBtlStatus: true,
      editForm: {
        name: '',
        phone: '',
        area: '',
        address: '',
        defaults: false
      },
      editFormRules: {
        name: [
          {required: true, message: '请输入收件人姓名', trigger: 'blur'}
        ],
        phone: [
          {required: true, message: '请输入联系号码', trigger: 'blur'}
        ],
        area: [
          {required: true, message: '请选择地域信息', trigger: 'blur'}
        ],
        address: [
          {required: true, message: '请输入地址信息', trigger: 'blur'}
        ]
      },
    }
  },
  created() {
    this.getAddressinfo()
  },
  methods: {
    getAddressinfo(){
      getAddressinfo().then(res =>{
        this.addressData = res.data.data
      })
    },
    handleSelectionChange(val){
      this.multipleSelection = val;
      this.delBtlStatus = val.length === 0
    },
    editHandle(id){
      getAddressById(id).then(res =>{
        this.editForm = res.data.data
        this.dialogVisible = true
        console.log(this.editForm)
      })
    },
    delHandle(id){
      var ids = []
      if (id) {
        ids.push(id)
      } else {
        this.multipleSelection.forEach(row => {
          ids.push(row.id)
        })
      }
      deleteAddressByIds(ids).then(res =>{
        this.$message({
          showClose: true,
          message: '恭喜你，操作成功',
          type: 'success',
          onClose:() => {
            this.getAddressinfo()
          }
        });
      })
    },
    resetForm(formName){
      this.$refs[formName].resetFields();
      this.dialogVisible = false
      this.editForm = {}
    },
    handleClose(){
      this.resetForm('editForm')
    },
    submitForm(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          updateOrSaveAddress(this.editForm).then(res =>{
            this.$message({
              showClose: true,
              message: '恭喜你，操作成功',
              type: 'success',
              onClose:() => {
                this.getAddressinfo()
              }
            });
            this.dialogVisible = false
            this.resetForm(formName)
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  }
}
</script>

<style scoped>

</style>